<template>
  <div id="newFlightOrder">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <router-link to="/catch/orders">(机票)追位订单</router-link>
        </li>
        <li class="breadcrumb-item active" aria-current="page">新建</li>
        <span class="ms-auto" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <template v-if="pnr !== null && editing">
      <div class="card">
        <div class="card-body bg-secondary py-1">
          行程信息
          <a
            href="javascript:void(0);"
            @click.stop="addPnrFlt()"
            class="btn btn-sm btn-success"
            >增加航段</a
          >
        </div>

        <table class="table table-sm mb-0">
          <thead>
            <tr>
              <th>航班号</th>
              <th>起飞日期</th>
              <th>舱位</th>
              <th>出发机场</th>
              <th>到达机场</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(info, index) in pnr.flights">
              <tr>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    maxlength="10"
                    placeholder="航班号"
                    v-model.trim="info.flight.flightNo"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    maxlength="15"
                    placeholder="示例：2017-01-09"
                    v-model.trim="info.flight.ddate"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    maxlength="2"
                    placeholder="舱位"
                    v-model.trim="info.flight.subclass"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    maxlength="3"
                    placeholder="出发机场"
                    v-model.trim="info.flight.dport"
                    size="10"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    maxlength="3"
                    placeholder="到达机场"
                    v-model.trim="info.flight.aport"
                    size="10"
                  />
                </td>
                <td>
                  <a
                    href="javascript:void(0)"
                    @click.stop="deletePnrFlt(index)"
                    class="btn btn-sm btn-danger mt-1"
                    >删除</a
                  >
                </td>
              </tr>
            </template>
          </tbody>
        </table>

        <div class="card-body bg-secondary py-1">
          乘机人信息
          <a
            href="javascript:void(0);"
            @click.stop="addPnrPsg()"
            class="btn btn-sm btn-success float-end"
            >增加乘机人</a
          >
        </div>
        <table class="table table-sm mb-0">
          <thead>
            <tr>
              <th>
                <a href="javascript:void(0)" @click.stop="selectAllPsg()"
                  >全选</a
                >
                /
                <a href="javascript:void(0)" @click.stop="unselectAllPsg()"
                  >全否</a
                >
              </th>
              <th>姓名</th>
              <th>证件号</th>
              <th>证件类型</th>
              <th>常旅客号</th>
              <th>手机</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
              <tr v-for="(info, index) in pnr.passengers">
                <td>
                  <input type="checkbox" v-model="info.selected" />
                </td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="乘机人姓名"
                    v-model.trim="info.psgName"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="证件号"
                    v-model.trim="info.idNo"
                  />
                </td>
                <td>
                  <select
                    class="form-select"
                    v-model.number="info.idType"
                    placeholder="证件类型"
                  >
                    <option
                      :value="idTypeInfo.idType"
                      v-for="idTypeInfo of idTypes"
                    >
                      {{ idTypeInfo.idName }}
                    </option>
                  </select>
                </td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="常旅客号"
                    v-model.trim="info.ffpNo"
                  />
                </td>
                <td>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="手机号"
                    v-model.trim="info.mobile"
                  />
                </td>
                <td>
                  <select
                    class="form-select"
                    v-model.number="info.psgType"
                    placeholder=""
                  >
                    <option value="0">成人</option>
                    <option value="1">儿童</option>
                    <option value="2">婴儿</option>
                  </select>
                </td>
                <td>
                  <a
                    href="javascript:void(0)"
                    @click.stop="deletePnrPsg(index)"
                    class="btn btn-sm btn-danger float-end"
                    >删除</a
                  >
                </td>
              </tr>
          </tbody>
        </table>
        <div class="card-body bg-info py-1">其它</div>
        <div class="card-body py-1">
          <div class="row mb-2">
            <label class="col-2 control-label text-end">PNR（现有）</label>
            <div class="col-8">
              <input
                type="text"
                class="form-control"
                v-model.trim="pnr.pnrNo"
              />
              <span class="text-info small"
                >记录编号，行程信息和乘机人信息，必填其一</span
              >
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 control-label text-end">监控类型</label>
            <div class="col-8">
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="0"
                  v-model.number="monitoring"
                />
                <label class="form-check-label">无</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="1"
                  v-model.number="monitoring"
                />
                <label class="form-check-label">HX/NO提醒</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="2"
                  v-model.number="monitoring"
                />
                <label class="form-check-label">追位</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="3"
                  v-model.number="monitoring"
                />
                <label class="form-check-label">关舱提醒（Q状态）</label>
              </div>
            </div>
          </div>
          <div class="row mb-2">
            <div class="offset-2">
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="0"
                  v-model.number="intlTicket"
                />
                <label class="form-check-label">国内航班</label>
              </div>
              <div class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="radio"
                  value="1"
                  v-model.number="intlTicket"
                />
                <label class="form-check-label">国际航班</label>
              </div>
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 control-label text-end">授权Office</label>
            <div class="col-8">
              <input
                type="text"
                class="form-control"
                v-model.trim="authOfficeNo"
              />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 control-label text-end">备注</label>
            <div class="col-8">
              <input type="text" class="form-control" v-model.trim="remark" />
            </div>
          </div>
        </div>
        <div class="row mb-2">
          <label class="col-2 control-label text-end">监控时间</label>
          <div class="col-8">
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="0"
                v-model.number="dayAndNight"
              />
              <label class="form-check-label">工作时间</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="1"
                v-model.number="dayAndNight"
              />
              <label class="form-check-label">日夜兼程</label>
            </div>
          </div>
        </div>
        <div class="card-footer text-center">
          <button
            type="button"
            class="btn btn-primary"
            :disabled="btnDisabled"
            @click.stop.prevent="createFlightOrder()"
          >
            保存
          </button>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { createCatchOrder, searchOrderDetail } from "@/api/catch-order.js";
import { processPnrFlightContent } from "@/api/flight-change.js";
import MyDatePicker from "@/components/my-datepicker.vue";
import $ from "jquery";

export default {
  components: {
    MyDatePicker,
  },
  data() {
    return {
      editing: false,
      pnrDetail: "",
      pnr: null,

      copyId: 0,

      remark: "",
      linkman: "",
      linkPhone: "",
      intlTicket: -1,
      monitoring: 0,
      dayAndNight: 0,
      authOfficeNo: "",
      btnDisabled: false,
    };
  },
  computed: {
    idTypes() {
      return this.$store.state.idTypes;
    },
    flightCount: function () {
      if (this.pnr === null) {
        return 0;
      }

      return this.pnr.flights.length;
    },
    psgCount: function () {
      if (this.pnr === null) {
        return 0;
      }

      let count = 0;

      for (const psg of this.pnr.passengers) {
        if (psg.selected === false) continue;

        count++;
      }

      return count;
    },
    psgTotal: function () {
      if (this.pnr === null) {
        return 0;
      }
      return this.pnr.passengers.length;
    },
  },
  mounted: function () {
    $('[data-bs-toggle="tooltip"]').tooltip();

    this.inputPnr();

    let id = parseInt(this.$route.query.copyId);
    if (!isNaN(id)) {
      this.copyId = id;
      this.getOriginalOrderDetail(this.copyId);
    }
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    createFlightOrder: function () {
      const params = {
        pnrNo: this.pnr.pnrNo,
        linkman: this.linkman,
        linkPhone: this.linkPhone,
        intlTicket: this.intlTicket,
        authOfficeNo: this.authOfficeNo,
        monitoring: this.monitoring,
        dayAndNight: this.dayAndNight,
        remark: this.remark,
        flights: this.pnr.flights,
        passengers: this.pnr.passengers,
      };

      const jsonParams = JSON.stringify(params);

      this.showLoading("保存中");

      createCatchOrder(
        jsonParams,
        (jsonResult) => {
          if (jsonResult.status !== "OK") {
            this.showErrMsg(jsonResult.errmsg, "danger");
          } else {
            // 根据条件判断是否跳转，还是停在此页
            if (this.psgCount === this.psgTotal) {
              this.showErrMsg("保存成功");
              this.pnr = null;
              this.pnrDetail = "";
              this.$router.push("/catch/orders/");
            } else {
              // 留在当前页面，继续保存
              this.showErrMsg("保存成功，请继续保存余下的乘机人");
              let b = true;
              while (b) {
                b = false;
                for (let i = 0; i < this.pnr.passengers.length; i++) {
                  if (this.pnr.passengers[i].selected) {
                    b = true;
                    this.deletePnrPsg(i);
                  }
                }
              }
            }
          }
        },
        () => {
          this.hideLoading();
        }
      );
    },
    deletePnrPsg: function (index) {
      this.pnr.passengers.splice(index, 1);
    },
    deletePnrFlt: function (index) {
      this.pnr.flights.splice(index, 1);
    },
    inputPnr: function () {
      this.inputMode = 1;
      this.pnr = {
        pnrNo: "",
        flights: [],
        passengers: [],
      };
      this.addPnrFlt();
      this.addPnrPsg();

      this.editing = true;
    },
    addPnrFlt: function () {
      this.pnr.flights.push({
        flight: {
          flightNo: "",
          ddate: "",
          subclass: "",
          dport: "",
          dterm: "",
          aport: "",
          aterm: "",
          dtime: "",
          atime: "",
        },
      });
    },
    addPnrPsg: function () {
      this.pnr.passengers.push({
        selected: true,
        psgName: "",
        idNo: "",
        idType: "",
        mobile: "",
      });
    },
    reset: function () {
      // body...
      this.pnrDetail = "";
      this.pnr = null;

      this.inputMode = 0;
    },
    selectAllPsg: function () {
      if (this.pnr === null) {
        return;
      }
      for (const psg of this.pnr.passengers) {
        psg.selected = true;
      }
    },
    unselectAllPsg: function () {
      if (this.pnr === null) {
        return;
      }
      for (const psg of this.pnr.passengers) {
        psg.selected = false;
      }
    },
    getOriginalOrderDetail: function (orderId) {
      searchOrderDetail(orderId, (v) => {
        // console.log(v)
        this.pnr.pnrNo = v.oldPnrNo;
        this.monitoring = v.monitoring;
        this.dayAndNight = v.dayAndNight;
        this.intlTicket = v.intlTicket;
        this.authOfficeNo = v.authOfficeNo;
        this.remark = v.remark;

        this.pnr.passengers.splice(0);
        for (const psg0 of v.passengers) {
          console.log(psg0);
          const psg = {
            selected: true,
            psgName: psg0.name,
            idNo: psg0.idNo,
            idType: psg0.idType,
            mobile: psg0.mobile,
          };
          this.pnr.passengers.push(psg);
        }

        this.pnr.flights.splice(0);
        for (const flt0 of v.flights) {
          const flt2 = flt0.flight;
          console.log(flt2);
          const flt = {
            flight: {
              flightNo: flt2.flightNo,
              ddate: flt2.departureDate,
              subclass: flt2.subclass,
              dport: flt2.departureAirport,
              aport: flt2.arrivalAirport,
            },
          };
          this.pnr.flights.push(flt);
        }
      });
    },
  },
};
// 585
</script>